<!--  -->
<template>
    <div>editor

        <el-form>
            <el-form-item label="标题">
                <el-input v-model="formData.title"></el-input>
            </el-form-item>
            <el-form-item label="内容">
                <div style="border: 1px solid #ccc">
                    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
                        mode="default" />
                    <Editor style="height: 500px; overflow-y: hidden;" v-model="formData.content"
                        :defaultConfig="editorConfig" mode="default" @onCreated="handleCreated" />
                </div>
            </el-form-item>
            <el-form-item label="">
                <el-button @click="submit" type="primary">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script lang='ts' setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css

import { onBeforeUnmount, ref, shallowRef, onMounted, reactive } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
const editorRef = shallowRef()
const toolbarConfig = {}
type InsertFnType = (url: string, alt: string, href: string) => void
const editorConfig: any = {

    placeholder: '请输入内容...',
    MENU_CONF: {
        uploadImage: {
            fieldName: 'file',
            server: import.meta.env.VITE_API_BASE_URL + '/api/upload/add',
            customInsert(res: any, insertFn: InsertFnType) {
                console.log("上传后的结果", res);
                // TS 语法
                // customInsert(res, insertFn) {                  // JS 语法
                // res 即服务端的返回结果
                // 从 res 中找到 url alt href ，然后插入图片
                let url = import.meta.env.VITE_IMG_BASE_URL + res.data.url;
                insertFn(url, "", "")
            },
        }
    }

}
// 内容 HTML
//   const valueHtml = ref('nihao')
const handleCreated = (editor: any) => {
    editorRef.value = editor // 记录 editor 实例，重要！
}

const formData = reactive({
    title: "",
    type: 1,
    content: "",
    elderly: [],
    pictures: []
})



const submit = () => {

    console.log(formData)
}



</script>
<style scoped></style>